<template>
  <div>
    <div>
      <div class="block" style="margin-left:0px">
        <el-cascader
          v-model="cascadeValue"
          :options="hospitals"
          :props="myProps"
          @change="handleChange" clearable placeholder="医院科室级联查询"></el-cascader>
      </div>
      <el-button @click="selAll" style="float:right" type="primary"
        >查看所有订单</el-button
      >
    </div>
    <div
      style="
        float: left;
        width: 100%;
        background-color: #e4f2ff;
        border: 1px solid #6ab7fe;
        margin: 10px 0px;
        height: 40px;
        line-height: 40px;
      "
    >
      <i
        class="el-icon-user-solid"
        style="color: #6ab7fe; line-height: 40px"
      ></i
      ><label style="font-size: 14px"> 订单总数：{{ pageInfo.total }}</label>
    </div>
    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 100%; margin: 20px auto"
    >
      <el-table-column type="expand" style="width: auto">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="租赁人">
              <span>{{ props.row.customer.cname }}</span>
            </el-form-item>
            <el-form-item label="所属医院：">
              <span>{{ props.row.bed.tbHospital.name }}</span>
            </el-form-item>
            <el-form-item label="手机号">
              <span>{{ props.row.customer.phone }}</span>
            </el-form-item>
            <el-form-item label="所属科室">
              <span>{{ props.row.bed.tbHospital.department1.name }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        :index="indexMethod"
        label="ID"
        style="width: auto"
      ></el-table-column>
      <el-table-column
        prop="onum"
        label="订单编号"
        show-overflow-tooltip
        style="width: auto"
      >
      </el-table-column>
      <el-table-column
        prop="bed.bnum"
        label="床位编号"
        show-overflow-tooltip
        style="width: auto"
      >
      </el-table-column>
      <el-table-column
        prop="orderTime"
        label="下单时间"
        show-overflow-tooltip
        style="width: auto"
      >
      </el-table-column>
      <el-table-column
        prop="returnTime"
        label="返还时间"
        show-overflow-tooltip
        style="width: auto"
      >
      </el-table-column>
      <el-table-column
        prop="payTime"
        label="付款时间"
        show-overflow-tooltip
        style="width: auto"
      >
      </el-table-column>
      <el-table-column
        label="租赁时长"
        show-overflow-tooltip
        style="width: 300px"
      >
        <template slot-scope="scope">
          {{
            scope.row.timeDifference
              | test1(scope.row.orderTime, scope.row.returnTime)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="orderstatus"
        label="订单状态"
        show-overflow-tooltip
        style="width: auto"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.orderstatus == 0" style="color: red"
            >进行中</span
          >
          <span v-if="scope.row.orderstatus == 1" style="color: blue"
            >待付款</span
          >
          <span v-if="scope.row.orderstatus == 2" style="color: green"
            >已完成</span
          >
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" style="width: auto">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-setting"
            type="danger"
            @click="softdel(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<script>
import {
  getOrderList,
  getHospitalList,
  getDepartmentList,
  getOrderListByHospital,
  getOrderListByDepartment,
  softdelete,
  getAllByCascade
} from "@/api/orderlist";
export default {
  data() {
    return {
      pageInfo: {
        pageSize: 5,
        pageNum: 1,
        // total: "",
        list: []
      },
      activeName: "1",

      key1: this.key1,
      key2: this.key2,
      myProps: {
        value: 'id',
        label: 'name',
        children: 'tbDepartments',
        expandTrigger: 'hover'
      },
      cascadeValue: [],
      hospitals: [],
    };
  },
  filters: {
    test1(val, p1, p2) {
      var t1 = Date.parse(p1);
      var t2 = Date.parse(p2);
      if (!isNaN(t1) && !isNaN(t2)) {
        // 计算时间差（毫秒）
        const differenceInMilliseconds = Math.abs(t2 - t1);
        // 将时间差转换为天、小时、分钟和秒
        const days = Math.floor(
          differenceInMilliseconds / (1000 * 60 * 60 * 24)
        );
        const hours = Math.floor(
          (differenceInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        const minutes = Math.floor(
          (differenceInMilliseconds % (1000 * 60 * 60)) / (1000 * 60)
        );
        const seconds = Math.floor(
          (differenceInMilliseconds % (1000 * 60)) / 1000
        );

        // 格式化时间差为年月日时分秒格式
        var timeDifference = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;

        return timeDifference;
      } else {
        return "";
      }
    },
  },

  methods: {
    loadOrderList() {
      getOrderList(this.pageInfo).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data.orderList;
          this.hospitals = res.data.data.hospitals;
          console.log(this.hospitals)
        }
      });
    },
    loadHospitals() {
      getHospitalList().then((res) => {
        if (res.data.code == 200) {
          this.hospitals = res.data.data;
        }
      });
    },
    loadDepartments() {
      getDepartmentList().then((res) => {
        if (res.data.code == 200) {
          this.departmentList = res.data.data;
        }
      });
    },

    //级联查询
    handleChange() {
      if (this.cascadeValue == '') {
        this.loadOrderList()
        return;
      }
      getAllByCascade(
        {pageNum: this.pageInfo.pageNum, pageSize: this.pageInfo.pageSize, cascadeValue: this.cascadeValue}
      ).then(res => {
        if (res.data.msg == '没有数据' || res.data.msg == '403') {
          this.pageInfo.list = '';
          // this.pageInfo.total = '';
        } else {
          this.pageInfo.list = res.data.data.list;
          this.pageInfo.pageNum = res.data.data.pageNum;
          this.pageInfo.pageSize = res.data.data.pageSize;
          // this.pageInfo.total = res.data.data.total;
        }
      })
    },

    selAll() {
      this.loadOrderList();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.pageInfo.pageNum = 1;
      this.loadOrderList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageInfo.pageNum = val;
      this.loadOrderList();
    },
    // handleChangeHospital() {
    //   getOrderListByHospital({ pageInfo: this.pageInfo, key1: this.key1 }).then(
    //     (res) => {
    //       if (res.data.code == 200) {
    //         this.pageInfo = res.data.data;
    //       }
    //     }
    //   );
    // },
    // handleChangeDepartment() {
    //   getOrderListByDepartment({
    //     pageInfo: this.pageInfo,
    //     key2: this.key2,
    //   }).then((res) => {
    //     if (res.data.code == 200) {
    //       this.pageInfo = res.data.data;
    //     }
    //   });
    // },
    indexMethod(index) {
      return index * 1 + 1;
    },
    softdel(row) {
      softdelete(row.oid).then(res=>{
        if(res.data.code == 200){
          alert("删除成功！");
          this.loadOrderList();
        }else {
          alert("系统异常，稍后重试！");
        }
      });
    },
  },
  mounted() {
    this.loadOrderList();
    // this.loadHospitals();
    // this.loadDepartments();
  },
};
</script>
